<template>
		<view class="tabChange" :style="{position:positionType,background:bg,top:top}">
			<view class="bail F_63676A" v-for="(item,index) in bail" :key="index" @click="bailBtn(index,item.val)">
				<view 
				:class="['bailName',{'bailColor':bailIndex==index}]"
				 :style="{color:bailIndex==index?fontColor:dfColor}">
					{{item.name}}
				</view>
				<view 
				:class="{'bailLine':bailIndex==index}"
				 :style="{color:bailIndex==index?fontColor:dfColor,background:bailIndex==index?'#be1d2f':''}"
				 ></view>
				 <!-- <image class="tabBarImg" :src="tabIndex==item.id?tabBarImg:''" mode="widthFix"></image> -->
				<view :class="['bailNum',bailIndex==index?'bailColor':'']"
				 :style="{color:bailIndex==index?fontColor:dfColor}"
				 v-if="item.num">
					{{item.num}}
				</view>
			</view>
		</view>
</template> 
<script>
	export default{
		props:{
			bail:{
				type:Array,
				default:[]
			},
			tabIndex:{
				default:0
			},
			top:{
				default:''
			},
			positionType:{
				default:''
			},
			bg:{
				default:'#ffffff'
			},
			fontColor:{
				default:'#333333'
			},
			dfColor:{
				default:'#676767'
			},
		},
		data(){
			return{
				bailIndex:0,
			} 
		},
		watch:{
			tabIndex: {
				handler(newName, oldName) {
				  this.bailIndex = this.tabIndex
				},
				// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
				immediate: true
			 }
		},
		mounted() {
			this.bailIndex = this.tabIndex
		},
		methods:{
			bailBtn(index,value){
				this.bailIndex = index
				this.$emit('tabBtn',value)
			},
		},
	}
</script>

<style scoped lang="less">
		.tabChange{
			left: 0;
			display: flex;
			width: 100%;
			height: 80rpx;
			line-height: 78rpx;
			background: white;
			z-index: 999;
			// #ifdef H5
			top:0;
			// #endif
			// #ifdef APP-PLUS
			top:88rpx;
			// #endif
			// #ifdef MP-WEIXIN
			top:135rpx;
			// #endif
			.bail{
				flex:1;
				width: 86rpx;	
				text-align: center;
				position: relative;
				.bailLine{
					width: 45rpx;
					height: 4rpx;
					margin: auto;
					transition: 0.5s all;
				}
				.bailColor{
					transition: 0.5s all;
				}
				.bailNum{
					position: absolute;
					top: -10rpx;
					right: 15rpx;
					font-weight: bold;
					font-size: 20rpx;
				}
			}
		}
</style>
